<template>
    <el-dialog
      width="50%"
      title="申请详情"
      :visible.sync="innerVisible"
      append-to-body
      lock-scroll
    >
      <el-descriptions title="申请详情">
        <el-descriptions-item label="类别名称">{{
          itemInOf.denomName
        }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{
          itemInOf.nftName
        }}</el-descriptions-item>
        <el-descriptions-item label="商品数量">{{
          itemInOf.nftNum
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <!-- 图片文件展示 -->
      <div class="demo-image__preview">
        <el-table ref="multipleTable" border   height="800" :data="srcList" style="width: 100% ;  " >
                  <el-table-column prop="imgName" label="源文件名称" width="300"></el-table-column>
                  <el-table-column prop="imgThumbnail" width="230" label="缩略图">
                      <template slot-scope="scope">
                          <img class="img" v-if="scope.row.imgThumbnail" :src="scope.row.imgThumbnail">
                          <img v-else src="">
                      </template>
                  </el-table-column>
                  <el-table-column prop="imgType" width="100" label="属性">
                      <template scope="scope">
                          <p v-if="scope.row.imgType=='1'">图片</p>
                          <p v-if="scope.row.imgType=='2'">音频</p>
                          <p v-if="scope.row.imgType=='3'">视频</p>
                          <p v-if="scope.row.imgType=='4'">3D</p>
                          <p v-if="scope.row.imgType=='5'">文件</p>
                      </template>
                  </el-table-column>
                  <el-table-column prop="imgUrl" width="500" label="imgUrl"></el-table-column>
              </el-table>
      </div>
      <!-- end -->
      <!-- <el-divider></el-divider> -->
      <!-- <el-descriptions title="NFT详情列表"></el-descriptions>
      <template v-if="this.itemInOf.status == 2">
        <el-form
          :inline="true"
          class="search-form"
          ref="test-form"
          label-width="auto"
          size="small"
          style="display: flex; justify-content: space-between"
        >
          <div class="input-row">
            <el-form-item label="选择状态:" class="search-form-item">
              <el-select
                v-model="value"
                placeholder="选择状态"
                @change="queryCriteria"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="未购买" value="0"></el-option>
                <el-option label="已购买" value="1"></el-option>
                <el-option label="已销毁" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <el-table v-loading="loading" :data="dataList">
          <el-table-column
            property="date"
            label="tokenID"
            prop="dawId"
          ></el-table-column>
          <el-table-column property="name" label="状态" width="200">
            <template scope="scope">
              <div v-if="scope.row.dawStatus == 0" style="color: #409eff">
                未购买
              </div>
              <div v-if="scope.row.dawStatus == 1" style="color: #f56c6c">
                已购买
              </div>
              <div v-if="scope.row.dawStatus == 2" style="color: #67c23a">
                已销毁
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template> -->
      <!-- <template v-else>
        <div v-if="this.itemInOf.status == 0" style="color: #409eff">审核中</div>
        <div v-if="this.itemInOf.status == 1" style="color: #f56c6c">审核失败:{{this.itemInOf.refuseInfo}}</div>
      </template> -->



      <!-- <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column width="55"> </el-table-column>
        <el-table-column prop="fileName" label="文件名称" width="120">
          <template slot-scope="scope">{{ scope.row.fileName }}</template>
        </el-table-column>
        <el-table-column label="属性" width="120">
          <template slot-scope="scope">
            <div>
              {{ ["图片", "音频", "视频", "3D模型", "文件"][scope.row.type - 1] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fileSize" label="大小(kb)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="filePath" label="url地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="url" width="230" label="缩略图">
          <template slot-scope="scope">
            <img
              style="width: 40px; height: 40px"
              :src="'https://uat-minio.dtbcart.com' + scope.row.filePath"
            />
          </template>
        </el-table-column>

        <el-table-column prop="describe" label="描述" show-overflow-tooltip>
        </el-table-column>
      </el-table> -->
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </el-dialog>
  </template>
  <script>
  export default {
    props: ["itemInOf"],
    data() {
      return {
        loading: true,
        innerVisible: false,
        dataList: [],
        srcList: [],
        value: "",
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条,
        },
      };
    },

    mounted() {
    },

    methods: {
      //选择
      // queryCriteria(val) {
      //   this.getNFTDataList(this.page);
      // },
      /**
       *  列表加载(NFT列表)
       */
      // getNFTDataList(page) {
      //   this.pageLoading = true;
      //   this.$http({
      //     url: this.$http.adornUrl(
      //       `/admin/nftdaw/getpageDawInfo?dawNameId=${this.itemInOf.dawNameId}&pageNum=${this.page.currentPage}&pageSize=${this.page.pageSize}&dawStatus=${this.value}`
      //     ),
      //     method: "get",
      //   }).then(({ data }) => {
      //     this.dataList = data.data.list;
      //     this.page.total = data.data.total;
      //     this.loading = false;
      //   });
      // },

      /**
        列表加载(图片)
       */
      getDataList(page) {
        let that = this;
        this.$http({
          url: this.$http.adornUrl(
            // `/p/nftapply/getNftApplyInfo?id=${this.itemInOf.id}`
            `/p/nftapply/pageImg?applyId=${this.itemInOf.id}&pageNum=${this.page.currentPage}&pageSize=${this.page.pageSize}`
          ),
          method: "get",
        }).then(({ data }) => {
          this.srcList = data.records;
          this.page.total = data.pages
          this.page.currentPage = data.pages
        });
      },

      init() {
        this.innerVisible = true;
        this.getDataList(this.page);
        // if (this.itemInOf.status == 2) {
        //   this.getNFTDataList(this.page);
        // }
      },

      //选择源文件
      openDocumentsList() {
        this.getDataList(this.page); //源文件加载
        //   this.innerVisible = true;
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //分页按钮
      handleSizeChange(val) {
        this.page.pageSize = val;
        // this.pageQuery.pageSize = val
        this.getDataList(this.page);
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        // this.pageQuery.pageSize = val
        this.getDataList(this.page);
      },
    },
  };
  </script>
  <style>
  .img {
    width: 100px;
    height: 100px;
  }
  </style>
